---
title: Custom Web
description: Learn how to use Unistyles 3.0 without React Native Web
---

import { Card, Aside } from '@astrojs/starlight/components'
import Seo from '../../../../components/Seo.astro'

<Seo
    seo={{
        title: 'Custom Web integration',
        description: 'Learn how to use Unistyles 3.0 without React Native Web'
    }}
>

It's possible to render Unistyles without `react-native-web` dependency by simply creating your own web-only components.

Unfortunately, you still need to install `react-native-web` in order to run your app, because most of the React Native libraries do not work without it.

For this we recommend following the guidelines provided by [Expo](https://docs.expo.dev/workflow/web/).

## How to create custom web components

In order to create custom web components, you need to use `getWebProps` function. It takes a `StyleProp` and returns an object with `className` and `ref` properties.

```tsx title="src/components/Header.tsx" /getWebProps/
import { StyleProp, TextStyle } from 'react-native'
import { getWebProps } from 'react-native-unistyles/web'

type HeaderProps = {
    style: StyleProp<TextStyle>
    children: string
}

export const Header: React.FC<HeaderProps> = ({ style, children }) => {
    const { ref, className } = getWebProps(style)

    return (
        <h1
            ref={ref}
            className={className}
        >
            {children}
        </h1>
    )
}
```

Or merge multiple styles:

```tsx title="src/components/Header.tsx" /getWebProps/
import { StyleProp, TextStyle } from 'react-native'
import { StyleSheet } from 'react-native-unistyles'
import { getWebProps } from 'react-native-unistyles/web'

type HeaderProps = {
    customStyle: StyleProp<TextStyle>
    children: string
}

export const Header: React.FC<HeaderProps> = ({ customStyle, children }) => {
    const webProps = getWebProps([customStyle, style.text])

    return (
        <h1 {...webProps}>
            {children}
        </h1>
    )
}

const style = StyleSheet.create(theme => ({
    text: {
        color: theme.colors.text,
        _web: {
            _hover: {
                color: theme.colors.primary,
            }
        }
    }
}))
```

That's it! Now you can use your custom web components in your app.

<Aside type="caution">
    If you're creating multiplatform app, remember to create a native fallback for your web components.
</Aside>

</Seo>
